jQuery(".foucebox").slide({ mainCell:".bd ul", effect:"fold", autoPlay:true, delayTime:300, triggerTime:50, startFun:function(i){
    //下面代码控制鼠标状态滑动
    jQuery(".foucebox .hoverBg").animate({"margin-top":100*i},150);
}
});


function getScrollTop() {
    var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
    var scrollLeft=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;
    return {
        scrollTop:scrollTop,
        scrollLeft:scrollLeft
    }
}

window.onscroll=function () {
    var scrollHeight=getScrollTop().scrollTop;

    if (scrollHeight<50) {
        $(".fm-name").removeClass("bounceInRight animated")
        $(".fm-info").removeClass("bounceInLeft animated")
    }
    if (scrollHeight>50&scrollHeight<=200) {
        $(".fm-name").addClass("bounceInRight animated")
        $(".fm-info").addClass("bounceInLeft animated")
        $(".fm-image>img").removeClass("hover")

    }
    if (scrollHeight>200&scrollHeight<=300) {
        $(".fm-image>img").addClass("hover")
        $(".fm-image>img").removeClass("flip animated")
        $(".toTop>a").css("display","none")
    }
    if (scrollHeight>700) {
        $(".toTop>a").css("display","block")
    }
    if (scrollHeight>300&scrollHeight<=600){
        $(".fm-image>img").removeClass("hover")
        $(".fm-image>img").addClass("flip animated")
        $(".drop-shadow").removeClass("about-hover")
        $(".about-grids").removeClass("grids-hover")

    }
    if (scrollHeight>600){
        $(".drop-shadow").addClass("about-hover")
    }
    if (scrollHeight>800){
        $(".drop-shadow").removeClass("about-hover")
        $(".about-grids").addClass("grids-hover")
    }
    if (scrollHeight<1100){
        $(".skills .dance").css({"opacity":'0.2','left':'0'})
    }
    if (scrollHeight>1100){
        $(".skills .dance").css({"opacity":'1','left':'80%'})
    }
    if (scrollHeight>1400){
        $(".skills .dance").addClass("flip animated")
    }
    if (scrollHeight>1700){
        $(".skills .dance").removeClass("flip animated")
        $(".skills .dance").addClass("hinge animated")

    }
}

// 超人部分
$(function() {
    // Set up variables
    var $el, $parentWrap, $otherWrap,
        $allTitles = $("dt").css({
            padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
            "cursor": "pointer" // make it seem clickable
        }),
        $allCells = $("dd").css({
            position: "relative",
            top: -1,
            left: 0,
            display: "none" // info cells are just kicked off the page with CSS (for accessibility)
        });

    // clicking image of inactive column just opens column, doesn't go to link
    $("#page-wrap").delegate("a","click", function(e) {

        if ( !$(this).parent().hasClass("curCol") ) {
            e.preventDefault();
            $(this).next().find('dt:first').click();
        }

    });

    // clicking on titles does stuff
    $("#page-wrap").delegate("dt", "click", function() {

        // cache this, as always, is good form
        $el = $(this);

        // if this is already the active cell, don't do anything
        if (!$el.hasClass("current")) {

            $parentWrap = $el.parent().parent();
            $otherWraps = $(".info-col").not($parentWrap);

            // remove current cell from selection of all cells
            $allTitles = $("dt").not(this);

            // close all info cells
            $allCells.slideUp();

            // return all titles (except current one) to normal size
            $allTitles.animate({
                fontSize: "14px",
                paddingTop: 5,
                paddingRight: 5,
                paddingBottom: 5,
                paddingLeft: 5
            });

            // animate current title to larger size
            $el.animate({
                "font-size": "20px",
                paddingTop: 10,
                paddingRight: 5,
                paddingBottom: 0,
                paddingLeft: 10
            }).next().slideDown();

            // make the current column the large size
            $parentWrap.animate({
                width: 320
            }).addClass("curCol");

            // make other columns the small size
            $otherWraps.animate({
                width: 140
            }).removeClass("curCol");

            // make sure the correct column is current
            $allTitles.removeClass("current");
            $el.addClass("current");

        }

    });

    $("#starter").trigger("click");

});




